<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>离职申请</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../layui/css/layui.css">
  <script src="../layui/layui.js"></script>
    <link rel="stylesheet" href="../layui-v2.9.8/layui/css/layui.css">
    <script src="../layui-v2.9.8/layui/layui.js"></script>
    <style type="text/css">
        @media screen and (max-width: 767px) {
            .layui-form{
                display: flex!important;
                flex-direction: column;
            }
            .layui-field-title {
                margin: 5px 0 !important;
            }
            .layui-field-title legend {
                font-size: 0.8rem !important;
            }
            .layui-form .layui-col-xs1 div{
                font-size: 0.9rem!important;
            }
            .layui-form .layui-col-xs1,.layui-form .layui-col-xs12 p{
                width: 20% !important;
                min-width: 70px;
                text-align: left !important;
                margin: 10px 0 0 5px;
                height: 19px !important;
                line-height: 19px !important;
            }
            .layui-form .layui-col-xs5,#copyPersonSelect{
                width: 80% !important;
                font-size: 0.7rem;
            }
            .layui-col-xs6 div button{
                height: 25px!important;
                line-height: 25px!important;
                padding: 0 10px!important;
                font-size: 0.8rem!important;
            }
            .layui-col-xs6 div{
                margin-left: 30px!important;
                margin-top: 0!important;
            }
        }
    </style>
    <script>
        function deleteprocess() {
            // 创建表单数据对象
            var formData = new FormData();
            formData.append("id", layui.$("#formid").val());
            // 使用sendBeacon方法发送异步请求
            navigator.sendBeacon("/process/delete", formData);
        }
        layui.use(function(){
            var  $=layui.$;
            var form = layui.form;
            $.ajax({
                    url: '/department/querydepartment1',
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        $.each(data.data, function (index, item) {
                            $('#department').append(new Option(item.departmentName, item.departmentId));// 下拉菜单里添加元素
                        });
                        layui.form.render("select");
                    }, error: function () {
                        alert("仓库列表加载失败")
                    }
                }
            )
            window.addEventListener("beforeunload",deleteprocess);
            var laydate = layui.laydate;
            // 渲染
            laydate.render({
                elem: '#finalDate',
                format: 'yyyy-MM-dd', // 设定日期显示格式
                type: 'date' // 只显示日期，不显示时间
            });
            form.on('submit(submitForm)', function(data){
                var sindex=layer.load(2, {shade: [0.5,'#000']});
                window.removeEventListener("beforeunload",deleteprocess);
                // 手动触发表单的提交
                return true; // 返回 true 表示继续提交表单，返回 false 表示取消提交
            });
            //自定义验证规则
            form.verify({
                maxSize:function(value){
                    if(value.length>200){
                        return '字数最大为200';
                    }
                },
                fileExt: function(value, item){ // value为文件路径，item为当前输入框的DOM对象
                    var allowedExtensions = ['jpg', 'png','jpeg']; // 允许的文件后缀
                    if(value){
                        var extension = value.split('.').pop().toLowerCase(); // 获取文件后缀并转为小写
                        if(allowedExtensions.indexOf(extension) === -1){
                            return '不支持该文件类型，请选择 ' + allowedExtensions.join(', ') + ' 格式的文件';
                        }
                    }
                }

            });
        });
    </script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>离职申请</legend>
</fieldset>
<div>
<form class="layui-form" action="/process/resignadd" enctype="multipart/form-data" method="post">
    <div style="display: none"><input type="text"name="id"id="formid" th:value="${id}"></div>
    <div class="layui-row">
      <div class="layui-col-xs1"style="text-align: center;height: 38px;font-size: 16px;line-height: 38px">
        <div>申请人</div>
      </div>
      <div class="layui-col-xs5 headfont">
          <input th:value="${userDetails.realName}" name="resignName" type="text" class="layui-input" readonly="readonly" >
      </div>
        <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px;">
            <div>预计离职日</div>
        </div>
        <div class="layui-col-xs5" >
            <input type="text" class="layui-input"name="finalDate"id="finalDate" lay-verify="required"  autocomplete="off" >
        </div>
        <div class="layui-col-xs12"style="text-align: center;height: 10px;">
        </div>
      <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px;">
        <div>离职原因</div>
      </div>
      <div class="layui-col-xs5">
          <input class="layui-input" name="resignReason"  lay-verify="required"   autocomplete="off"  lay-affix="clear">
      </div>
        <div class="layui-col-xs1"style="text-align: center;height: 38px;font-size: 16px;line-height: 38px;">
            <div>备注</div>
        </div>
        <div class="layui-col-xs5">
            <textarea name="remarks"  class="layui-textarea"lay-verify="maxSize" placeholder="字数小于200"></textarea>
        </div>
        <div class="layui-col-xs12"style="text-align: center;height: 10px;">
        </div>
      <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px;">
          <div >审核人</div>
      </div>
      <div class="layui-col-xs5">
          <select id="auditingperson" name="auditingPerson" lay-verify="required">
              <option value=""></option>
              <option th:each="BaseUser : ${lb}"th:value="${BaseUser.username}" th:text="${BaseUser.realName}"></option>
          </select>
      </div>
        <div class="layui-col-xs12"style="text-align: center;height: 10px;">
        </div>
        <div class="layui-col-xs6"style="height: 200px;">
            <div style="display: flex;margin-left: 100px;margin-top: 150px">
                <button class="layui-btn"lay-filter="submitForm" lay-submit id="submit" >保存</button>
                <!--                <button class="layui-btn" id="reset">取消</button>-->
            </div>
        </div>
    </div>
</form>
</div>

</body>
</html>